<template>
  <div class="home-container">
    <van-nav-bar title="头条" fixed />
    <van-pull-refresh v-model="refreshing" :disabled="finished" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="我已经被掏空了"
        @load="onLoad"
      >
        <Article
          v-for="item in articleList"
          :key="item.art_id"
          :title="item.title"
          :aut-name="item.aut_name"
          :comm-count="item.comm_count"
          :pub-date="item.pubdate"
          :cover="item.cover"
        ></Article>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入 request 模块
// import request from '@/utils/request.js'
import { getArticleList } from '@/api/homeAPI.js'
// 导入组件
import Article from '@/components/Article/Article.vue'
// 鲁大师 提供了许多牛逼的函数 节流的函数、防抖的函数、操作数组的一系列函数、操作对象的一系列函数（对象的深拷贝、浅拷贝）
import _ from 'lodash'

let fn = null

export default {
  name: 'MyHome',
  components: {
    Article
  },
  data() {
    return {
      page: 1, // 页码
      size: 10, // 每页数量
      articleList: [],
      loading: true, // 是否正在加载更多,防止多次加载  false时页面加载时,会触发 onLoad 方法
      finished: false, // 是否已全部加载完  为true时,不触发load事件
      refreshing: false // 是否正在刷新
    }
  },
  created() {
    this.initArticleList()
  },
  activated() {
    fn = this.recordTopHandler()
    window.addEventListener('scroll', fn)
  },
  deactivated() {
    window.removeEventListener('scroll', fn)
  },
  methods: {
    // 获取文章数据
    async initArticleList() {
      const { data: res } = await getArticleList(this.page, this.size)
      // console.log(res)
      // 下拉刷新
      if (this.refreshing) {
        this.articleList = [...res, ...this.articleList]
        this.refreshing = false
      // 上拉加载
      } else {
        this.articleList = [...this.articleList, ...res]
        this.loading = false
      }
      if (res.length === 0) {
        this.finished = true
      }
    },
    // 上拉加载
    onLoad() {
      // console.log('加载中。。。')
      this.page++
      this.initArticleList()
    },
    // 下拉刷新 最新数据
    onRefreshNewMessage() {
      console.log('刷新中。。。')
      // 清空列表数据 下拉时会将 refreshing 变为 true
      if (this.refreshing) {
        this.articleList = []
        this.refreshing = false
      }
      this.finished = false

      // 重新加载数据 最新数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.page = 0
      this.onLoad()
    },
    // 下拉往列表前添加数据
    onRefresh() {
      // console.log('刷新中。。。')
      // this.refreshing = false
      this.onLoad()
    },
    recordTopHandler() {
      return _.debounce(() => {
        this.$route.meta.top = window.scrollY
      }, 50, { trailing: true })
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;
  // 头部背景颜色
  // .van-nav-bar {
  //   background-color: #1989fa;
  // }
  // // 头部字体颜色
  // /deep/ .van-nav-bar__title {
  //   color: white;
  // }
}
</style>
